const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //手动指定入口和出口文件
    entry: './src/main.js',     //入口 表示要使用webpack打包哪个文件
    output: {        //出口 输出文件相关配置
        path: path.resolve(__dirname, 'dist'),      //指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js'       //指定 输出的文件名称
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader','css-loader']},    //所有以.css结尾的文件 都使用第三方loader处理
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},    //所有以.css结尾的文件 都使用第三方loader处理
            //所有图片文件 都使用第三方loader处理 [name].[ext] 表示使用资源原本的名称和后缀
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=287888&name=[hash:8]-[name].[ext]'},    
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},     //处理字体文件的loader
            {test: /\.vue$/, use: 'vue-loader'},     //处理.vue文件的loader
            {test: /\.js$/, use: 'babel-loader',exclude: '/node_modules'}
        ]
    },
    resolve: {
        alias: {
            //修改Vue 被导入时包的路径
            'vue$': 'vue/dist/vue.js'
        }
    }
}